<template>
    <view class="content">
        <u-navbar :is-back="false" :border-bottom="false" title=" " :background="top_bg_color">
			<!-- 消息 -->
            <view class="nav_menu" @click="toPage(`/pages/notice/notice`)">
                <image src="../../static/icon/news.png" class="news"></image>
				<view class="news-num" v-if="data.count > 0">{{data.count}}</view>
            </view>
			<view class="title">
				<image :src="site.image_uri" class="logo" mode="aspectFit"></image>
				<view>{{ site.name }}</view>
			</view>
        </u-navbar>
		
		<view class="top">
			<u-search placeholder="搜索内容" shape="square" :show-action="false" bg-color="#fff" search-icon-color="#1f3b67" 
				v-model="keyword" @search="doSearch"></u-search>
				
			<view class="u-p-t-20">
				<u-swiper :list="bannerx" :height="323" indicator-pos="bottomRight" @click="toGuangGao($event, data.banner)"></u-swiper>
			</view>
			
			<!-- 公告 -->
			<view class="kx-box" v-if="data&&data.notice&&data.notice[0]">
				<view class="kx">
					<view>快讯</view>
					<view class="kx-d">
						{{ data.title }}
					</view>
				</view>
				<view class="kx-text u-line-2" @click="toPage(`/pages/notice/detail?id=${data.notice[0].id}`)">
					{{ data.notice[0].name }}
				</view>
			</view>
			
			<!-- 下单信息 -->
			<view class="noticex" v-if="notice && notice.length > 0">
				<image src="../../static/icon/news_2.png" class="ico"></image>
			    <u-notice-bar class="txx" :volume-icon="false" type="none" mode="vertical" :list="notice" :font-size="24"
			        color="#fff" padding="18rpx 0rpx"></u-notice-bar>
			</view>
			<!-- 领券中心 -->
			<image v-if="data&&data.coupon&&data.coupon[0]&&data.coupon[0].image_uri" :src="data.coupon[0].image_uri" 
				class="coupon" @click="toPage(`/mine/pages/coupon/coupon`)"></image>
		</view>
		
		<view v-if="list&&list.length > 0">
			<view class="tit">
				<view>课程推荐</view>
				<view class="more" @click="doSearch">更多课程</view>
			</view>
			<view class="cen-d">
				<view class="item" v-for="(item, index) in list" :key="index" 
					@click="toPage(`/pages/goods/goods-details?id=${item.id}&good_type=${item.good_type}`)">
					
					<image :src="item.image_uri" class="img"></image>
					<view class="item-d">
						<view class="name">{{item.belong}}</view>
						<view class="sub" v-if="item.content">{{item.content}}</view>
						<view class="down">
							<view class="price">
								￥<text class="price-num">{{item.price}}</text>
							</view>
							<view class="line-price" v-if="item.material_price">
								￥{{item.material_price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 在线问答-跳转美洽 -->
		<image v-if="data&&data.line&&data.line[0]&&data.line[0].image_uri" :src="data.line[0].image_uri"
			class="meiqia"></image>
		
		<view class="u-p-b-30" v-if="live && live.length > 0">
			<view class="tit">
				<view>直播专区</view>
				<view class="more" @click="toPage(`/pages/live/live`)">更多课程</view>
			</view>
			<view class="live" v-for="(item, index) in live" :key="index" v-if="index == 0" @click="livePlayer(item)">
				
				<image :src="item.recommend_uri" class="live-ing-img"></image>
				
				<view class="live-ing-top">
					<view class="s-live start" v-if="item.status == 1">
						<image src="../../static/icon/icon_4.png" class="icon-3"></image>
						<view>未开始</view>
					</view>
					<view class="live-ing" v-if="item.status == 3">
						<image src="../../static/icon/icon_3.png" class="icon-3"></image>
						<view>直播中</view>
					</view>
					<view class="s-live end" v-if="item.status == 4">
						<image src="../../static/icon/icon_5.png" class="icon-3"></image>
						<view>已结束</view>
					</view>
					
					<view class="live-name">主讲人：{{item.member}}</view>
				</view>
			</view>
			
			<view class="scroll-box" v-if="live && live.length > 1">
			    <scroll-view scroll-x :scroll-with-animation="true">
			        <view class="scroll">
			            <view class="scroll-goods" v-for="(item, index) in live" :key="index" v-if="index > 0" 
							@click="livePlayer(item)">
			                <image :src="item.image_uri" class="s-img"></image>
							
							<view class="live-top">
								<view class="s-live start" v-if="item.status == 1">
									<image src="../../static/icon/icon_4.png" class="icon-3"></image>
									<view>未开始</view>
								</view>
								<view class="s-live" v-if="item.status == 3">
									<image src="../../static/icon/icon_3.png" class="icon-3"></image>
									<view>直播中</view>
								</view>
								<view class="s-live end" v-if="item.status == 4">
									<image src="../../static/icon/icon_5.png" class="icon-3"></image>
									<view>已结束</view>
								</view>
								
								<view class="live-name">主讲人：{{item.member}}</view>
							</view>
			            </view>
			        </view>
			    </scroll-view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				top_bg_color: { backgroundImage: 'linear-gradient(180deg, rgb(230, 240, 247),rgb(223, 237, 247))'},
				bannerx: [],
				notice: [],
				data: {},
				site: {},
				list: [],//商品列表
				live: [],//直播列表
            };
        },
		onShareAppMessage(res) {
			return {
		        title: this.site.name,
		        path: '/pages/tabbar/index?parentID=' + _this.$getSync('userId')
			}
		},
		onShareTimeline(){
		    return {
		        title: this.site.name,
		        path: '/pages/tabbar/index?parentID=' + _this.$getSync('userId')
		    }
		},
        onLoad(option) {
			// 分享
			if (option.scene) {
			    let uid = decodeURIComponent(option.scene).split('=')[1];
			    if (uid) {
			        console.log(uid)
			        uni.setStorageSync('parentID', uid);
			    }
			}
			if (option.parentID) {
			    uni.setStorageSync('parentID', option.parentID);
			}
			
            this.getSite()
        },
		onShow() {
			this.getData()
			this.getList()
			this.getLive()
		},
        methods: {
			livePlayer(item) {
				if (item.status == 1) {
					this.$toast('未开始');
					return false;
				} else if (item.status == 3 && item.url) {
					wx.navigateTo({
						url: item.url,
					})
				} else if (item.status == 4) {
					this.$toast('已结束');
					return false;
				}
			},
			
			doSearch() {
				this.$sTo(`./cate`)
			},
			
			toPage(url) {
				if (!uni.getStorageSync('userToken')) {
				    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
				        uni.navigateTo({
				            url: "/pages/login/login"
				        })
				    })
				} else {
					this.$gTo(url)
				}
			},
			
			// 商品轮播跳转 type: 1商品分类列表 
			toGuangGao(e, array) {
			    if (!uni.getStorageSync('userToken')) {
			        uni.navigateTo({
			            url: '../login/login'
			        });
			    } else {
			        if (array[e].type == 1) {
			            uni.switchTab({
			                url: '/pages/tabbar/cate'
			            })
			        } else if (array[e].type == 2) {
			            this.$gTo('/pages/goods/goodsDetails?id=' + array[e].url)
			        } 
			    }
			},
			
			// 获取直播列表
			getLive() {
				this.$ajax('applets/live_list', {
					userToken: this.$getSync('userToken'),
					is_recommend: 1,//是否首页推荐 0-否 1-是
					page: 1,
					limit: 10,
				}).then(ret => {
					if (ret.status == 0) {
			            this.live = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 获取商品列表
			getList() {
				this.$ajax('applets/wareList', {
					userToken: this.$getSync('userToken'),
					keywords: '',
					type: 2,//2-正常商品 3-积分商品
					is_recommend: 1,//是否首页推荐 0-否 1-是
					category_id: '',
					page: 1,
					limit: 10,
				}).then(ret => {
					if (ret.status == 0) {
			            this.list = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 获取首页数据
			getData() {
				this.$ajax('applets/index', {
					userToken: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.status == 0) {
			            this.data = ret.data
			            
			            this.bannerx = []
			            if (this.data.banner.length > 0) {
			                this.data.banner.forEach(cur => {
			                    this.bannerx.push({image: cur.image_uri})
			                })
			            }
			            // 下单信息
			            this.notice = []
			            if (this.data.order.length > 0) {
			                this.data.order.forEach(cur => {
			                    this.notice.push(cur.name)
			                })
			            }
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 获取站点信息
			getSite() {
				this.$ajax('login/getConfig', {
					
				}).then(ret => {
					if (ret.status == 0) {
			            this.site = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	
	
    page{
        background-color: #fff;
    }
	.nav_menu {
	    margin-left: 24rpx;
		position: relative;
	}
	.news{
		width: 33rpx;
		height: 37rpx;
	}
	.news-num{
		font-size: 20rpx;
		color: #fff;
		line-height: 1;
		padding: 4rpx 8rpx;
		background-color: #f23500;
		border-radius: 50%;
		position: absolute;
		right: -18rpx;
		top: -5rpx;
	}
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
		left: 50%;
		transform: translateX(-45%);
	}
	.logo{
		width: 120rpx;
		height: 40px;
		margin-right: 10rpx;
	}
	
	
	.top{
		padding: 20rpx 20rpx 50rpx;
		background: linear-gradient(180deg, rgb(223, 237, 247), rgb(129, 196, 243));
	}
	.kx-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 25rpx 30rpx;
		margin-top: 20rpx;
	}
	.kx{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		font-weight: bold;
	}
	.kx-d{
		font-size: 14rpx;
		font-weight: normal;
		color: #fff;
		line-height: 1;
		background-color: #1f3b67;
		border-radius: 50rpx;
		padding: 4rpx 6rpx;
	}
	.kx-text{
		flex: 1;
		font-size: 26rpx;
		color: #1e3355;
		padding-left: 35rpx;
	}
	
	.noticex {
	    width: 710rpx;
	    height: 65rpx;
	    border-radius: 18rpx;
		background-color: #43699e;
	    margin-top: 20rpx;
	    display: flex;
	    align-items: center;
	    padding: 0 22rpx;
	
	    .ico {
	        width: 29rpx;
	        height: 23rpx;
	    }
	
	    .txx {
	        flex: 1;
	        width: 0;
	    }
	}
	
	.coupon{
		width: 710rpx;
		height: 278rpx;
		margin-top: 20rpx;
	}
	
	
	.tit{
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 20rpx 25rpx;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -20rpx;
	}
	.more{
		font-size: 26rpx;
		font-weight: normal;
	}
	
	
	.cen-d{
		padding: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.item{
		width: 346rpx;
		height: 510rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-right: 18rpx;
		margin-bottom: 20rpx;
		box-shadow: 1.5px 1.5px 15px #efefef;
	}
	.item:nth-child(2n){
		margin-right: 0;
	}
	.img{
		width: 346rpx;
		height: 329rpx;
	}
	.item-d{
		padding: 20rpx 15rpx 30rpx;
	}
	.name{
		font-size: 28rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.sub{
		font-size: 22rpx;
		color: #54586a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 10rpx;
	}
	.down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
	}
	.price{
		font-size: 24rpx;
		color: #fd463e;
	}
	.price-num{
		font-size: 38rpx;
		font-weight: bold;
	}
	.line-price{
		font-size: 22rpx;
		color: #54586a;
		text-decoration: line-through;
	}
	
	.meiqia{
		width: 710rpx;
		height: 157rpx;
		margin: 20rpx;
	}
	
	
	.live{
		position: relative;
		padding: 0 20rpx 30rpx;
	}
	.live-ing-img{
		width: 710rpx;
		height: 330rpx;
		border-radius: 10rpx;
	}
	.live-ing-top{
		height: 38rpx;
		background: #444444;
		padding-right: 15rpx;
		border-radius: 10rpx 0 10rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 20rpx;
		color: #fff;
		position: absolute;
		// top: 34rpx;
		top: 0;
		left: 20rpx;
	}
	.live-ing{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 106rpx;
		height: 38rpx;
		background-color: #ef4034;
		border-radius: 10rpx 0 10rpx 0;
	}
	.icon-3{
		width: 17rpx;
		height: 17rpx;
		margin-right: 10rpx;
	}
	.scroll-box{
	    width: 750rpx;
	    height: 323rpx;
	    white-space: nowrap;
	    padding-left: 20rpx;
	}
	.scroll{
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	}
	.scroll-goods{
	    width: 323rpx;
	    height: 323rpx;
	    border-radius: 10rpx;
	    margin-right: 16rpx;
		position: relative;
	}
	.s-img{
		width: 323rpx;
		height: 323rpx;
		border-radius: 10rpx;
	}
	
	.live-top{
		height: 38rpx;
		background: #444444;
		padding-right: 15rpx;
		border-radius: 10rpx 0 10rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 20rpx;
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
	}
	.live-name{
		padding-left: 15rpx;
	}
	.s-live{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 38rpx;
		background-color: #ef4034;
		border-radius: 10rpx 0 10rpx 0;
	}
	
	.start{
		background-color: #1f5bbe;
	}
	.end{
		background-color: #9f9f9f;
	}

</style>
